<!-- 
船舶航行演示组件
功能：展示三维船舶模型沿预定轨迹航行
核心能力：
1. 加载GLB格式船舶模型
2. 创建动态航行路径
3. 实现船舶运动动画
4. 视角自动跟踪
-->
<template>
  <div id="cesiumContainer" class="cesium-container">
     </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted, onUnmounted } from 'vue';
let viewer = null;

/**
 * 船舶航行轨迹坐标定义
 * 坐标系：WGS84经纬度（经度,纬度,高度）
 * 轨迹说明：定义四个航路点构成船舶航行路径
 */
const shipPositions = [
  Cesium.Cartesian3.fromDegrees(-150.0, 0.0, 0),  // 起始点：西经150度
  Cesium.Cartesian3.fromDegrees(-149.5, -0.5, 0), // 第二航点：向西南方向移动
  Cesium.Cartesian3.fromDegrees(-149.0, -1.0, 0), // 第三航点：继续西南航行
  Cesium.Cartesian3.fromDegrees(-148.5, -1.5, 0)  // 终点：西经148.5度，南纬1.5度
];

onMounted(() => {
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MTNlOWJkNy01NTU0LTQ3ZWQtYmM3Yi1mNGViODFhOGY3NzQiLCJpZCI6MjgwODczLCJpYXQiOjE3NDEwNzIwNTl9.v7K25kZiBHwarMikqFQEH-NROT27E4JjdsmpUULH4J0";

  // 创建带地形和影像的三维地球实例
viewer = new Cesium.Viewer('cesiumContainer', {
    // terrainProvider: Cesium.createWorldTerrain(),  // 加载全球地形数据

    imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }), // 使用ID为3的卫星影像
    timeline: true,       // 启用时间轴控件
    animation: true,      // 显示动画控件
    shouldAnimate: true  // 自动开始场景动画
  });
  console.log('三维地球初始化完成，已启用全球地形和卫星影像');

  /**
 * 创建航行路径可视化实体
 * 技术特性：
 * - 红色5像素宽折线
 * - 使用预定义船舶坐标点
 */
const pathEntity = viewer.entities.add({
    polyline: {
      positions: shipPositions,  // 使用预定义航点坐标
      width: 5,                // 路径线宽度
      material: Cesium.Color.RED // 红色材质
    }
  });
  console.log('红色航线轨迹创建成功');

  /**
 * 船舶模型实体配置
 * 模型参数：
 * - GLB模型路径：/models/glb/ship.glb
 * - 最小像素尺寸：128（保证远距离可见）
 * - 最大缩放比例：200（限制模型最大尺寸）
 * - 运行动画：启用模型内置动画
 */
const shipEntity = viewer.entities.add({
    position: shipPositions[0], // 初始位置设为第一个航点
    model: {
      uri: '/models/glb/ship.glb',
      minimumPixelSize: 128,
      maximumScale: 200,
      runAnimations: true
    },
    path: {
      resolution: 1,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.3,
        color: Cesium.Color.YELLOW
      }),
      width: 10
    },
    orientation: new Cesium.VelocityOrientationProperty()
  });
  console.log('船舶模型加载完成，路径可视化已添加');

  // 设置实体跟踪和视角锁定
  viewer.trackedEntity = shipEntity;
  console.log('视角已锁定到船舶模型');

  // 添加路径移动动画
  const start = Cesium.JulianDate.fromDate(new Date());
  const stop = Cesium.JulianDate.addSeconds(start, 60, new Cesium.JulianDate());
  shipEntity.position = new Cesium.SampledPositionProperty();
  
  shipPositions.forEach((pos, index) => {
    const time = Cesium.JulianDate.addSeconds(start, index * 15, new Cesium.JulianDate());
    shipEntity.position.addSample(time, pos);
  });
  
  viewer.clockViewModel.shouldAnimate = true;
  console.log('船舶运动动画初始化完成');
});

onUnmounted(() => {
  if(viewer) {
    viewer.destroy();
    viewer = null;
  }
});

</script>

<style scoped>

</style>